

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/zoro.jpg">
  <link rel="icon" href="/img/zoro.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#efb9b9">
  <meta name="description" content="">
  <meta name="author" content="AgoniLay">
  <meta name="keywords" content="">
  
  <title>CSS笔记 - AgoniLay的博客</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/arta.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/scroller.css">
<link rel="stylesheet" href="/css/bynode.css">
<link rel="stylesheet" href="/css/mouse.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"agonilay.github.io","root":"/","version":"1.8.11","typing":{"enable":true,"typeSpeed":150,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading2.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>AgoniLay</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" target="_self" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="iconfont icon-bookmark"></i>
                索引
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                
                  
                  
                  
                  <a class="dropdown-item" href="/archives/">
                    <i class="iconfont icon-archive-fill"></i>
                    归档
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/categories/">
                    <i class="iconfont icon-category-fill"></i>
                    分类
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/tags/">
                    <i class="iconfont icon-tags-fill"></i>
                    标签
                  </a>
                
              </div>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                友链
              </a>
            </li>
          
        
          
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/zoro2.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h3" id="subtitle" title="CSS笔记">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      AgoniLay
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-08-04 23:45" pubdate>
        2021年8月4日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      301
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
			
			
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">CSS笔记</h1>
            
            <div class="markdown-body">
              <p>Cascading Style Sheets 层叠样式表（级联样式表）</p>
<h3 id="好处"><a href="#好处" class="headerlink" title="好处"></a>好处</h3><ul>
<li>降低耦合度（解耦）</li>
<li>让分工协作更容易</li>
<li>提高开发效率</li>
</ul>
<h3 id="使用方式"><a href="#使用方式" class="headerlink" title="使用方式"></a>使用方式</h3><h4 id="内联样式"><a href="#内联样式" class="headerlink" title="内联样式"></a>内联样式</h4><p>在标签内使用style属性指定css代码</p>
<p>适用于属性较少时</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color:red;&quot;</span>&gt;</span>hello css<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h4 id="内部样式"><a href="#内部样式" class="headerlink" title="内部样式"></a>内部样式</h4><p>内嵌式：在 head 标签内，定义 style 标签，style 标签的标签体内容就是 css 代码</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-tag">div</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">color</span>: blue;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>hello css<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h4 id="外部样式"><a href="#外部样式" class="headerlink" title="外部样式"></a>外部样式</h4><p>a.css 文件</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span>&#123;<br>    <span class="hljs-attribute">color</span>:green;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h5 id="链接式-推荐使用"><a href="#链接式-推荐使用" class="headerlink" title="链接式 (推荐使用)"></a>链接式 (推荐使用)</h5><p>在 head 标签内，定义 link 标签，引入外部的资源文件</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;css/a.css&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>hello css<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h5 id="导入式"><a href="#导入式" class="headerlink" title="导入式"></a>导入式</h5><p>使用 <code>@import</code> 在 style 标签内导入，必须在标签内最前面</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-keyword">@import</span> <span class="hljs-string">&quot;css/a.css&quot;</span>;</span><br><span class="css">    <span class="hljs-keyword">@import</span> url(<span class="hljs-string">&quot;css/a.css&quot;</span>);</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<p>引号可以是单引号也可以是双引号，也可以省略引号</p>
<p>link 和 @import 的区别：</p>
<ul>
<li>link 是 html 标签；而 @import 是 css 提供的</li>
<li>link 在页面加载时加载；@import 在页面加载完再加载</li>
<li>@import IE5 以上才可识别；link 无兼容性问题</li>
<li>link 样式的权重高于 @import 的权重</li>
</ul>
<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">选择器 &#123; <span class="hljs-comment">/* 样式分隔符 */</span><br>    属性名<span class="hljs-number">1</span>: 属性值<span class="hljs-number">1</span>;  <span class="hljs-comment">/* 这每一行叫声明 */</span><br>    属性名<span class="hljs-number">2</span>: 属性值<span class="hljs-number">2</span>;<br>    ...<br>&#125; <span class="hljs-comment">/* 样式分隔符 */</span><br></code></pre></div></td></tr></table></figure>

<ul>
<li>选择器：筛选具有相似特征的元素</li>
<li>每一对属性需要使用 <code>;</code> 隔开，最后一对属性可以不加</li>
</ul>
<h4 id="注释语法"><a href="#注释语法" class="headerlink" title="注释语法"></a>注释语法</h4><p>在 css 中注释使用 <code>\* 注释内容 *\</code> </p>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><h4 id="基础选择器"><a href="#基础选择器" class="headerlink" title="基础选择器"></a>基础选择器</h4><table>
<thead>
<tr>
<th align="center">名称</th>
<th align="center">作用</th>
<th align="center">语法</th>
<th align="center">注意</th>
</tr>
</thead>
<tbody><tr>
<td align="center">id 选择器</td>
<td align="center">选择具体的 id 属性值的元素</td>
<td align="center"><code>#id属性值 &#123;&#125;</code></td>
<td align="center">建议在一个 html 页面中 id 值唯一</td>
</tr>
<tr>
<td align="center">元素选择器</td>
<td align="center">选择具有相同标签名称的元素</td>
<td align="center"><code>标签名称 &#123;&#125;</code></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">类选择器</td>
<td align="center">选择具有相同的 class 属性值的元素</td>
<td align="center"><code>.class属性值 &#123;&#125;</code></td>
<td align="center">类选择器选择器优先级高于元素选择器</td>
</tr>
</tbody></table>
<h4 id="扩展选择器"><a href="#扩展选择器" class="headerlink" title="扩展选择器"></a>扩展选择器</h4><table>
<thead>
<tr>
<th>名称</th>
<th>作用</th>
<th>语法</th>
<th>注意</th>
</tr>
</thead>
<tbody><tr>
<td>通配符选择器</td>
<td>选择所有元素</td>
<td><code>* &#123;&#125;</code></td>
<td></td>
</tr>
<tr>
<td>并集选择器(分组选择器)</td>
<td>同时选择多个选择器</td>
<td><code>选择器1, 选择器2 &#123;&#125;</code></td>
<td>集体声明，减少代码的书写量</td>
</tr>
<tr>
<td>交集选择器</td>
<td>更精准的找到要选择的</td>
<td><code>标签名.class名 &#123;&#125;</code><br><code>标签名#id名</code></td>
<td></td>
</tr>
<tr>
<td>后代选择器(包含选择器)</td>
<td>筛选选择器1元素下的选择器2元素</td>
<td><code>选择器1 选择器2 &#123;&#125;</code></td>
<td></td>
</tr>
<tr>
<td>子元素选择器(子选择器)</td>
<td>筛选选择器1的子元素选择器2</td>
<td><code>选择器1 &gt; 选择器2 &#123;&#125;</code></td>
<td>只选直系</td>
</tr>
<tr>
<td>相邻选择器</td>
<td>筛选选择器1的相邻元素选择器2</td>
<td><code>选择器1 + 选择器2 &#123;&#125;</code></td>
<td>选择器1 必须在 选择器2 之前</td>
</tr>
<tr>
<td>兄弟选择器</td>
<td>筛选选择器1的所有兄弟元素选择器2</td>
<td><code>选择器1 ~ 选择器2 &#123;&#125;</code></td>
<td></td>
</tr>
</tbody></table>
<h5 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h5><p>选择元素名称，属性名=属性值的元素</p>
<ul>
<li><code>元素名称[属性名] &#123;&#125;</code> ：选择带有该属性的元素</li>
<li><code>元素名称[属性名=&quot;属性值&quot;] &#123;&#125;</code> ：该属性的值为该属性值的 （常用）</li>
<li><code>元素名称[属性名^=&quot;xxx&quot;] &#123;&#125;</code> ：属性值为 xxx 开头的</li>
<li><code>元素名称[属性名$=&quot;xxx&quot;] &#123;&#125;</code> ：属性值为 xxx 结尾的</li>
<li><code>元素名称[属性名*=&quot;xxx&quot;] &#123;&#125;</code> ：属性值的任意位置带有 xxx （常用）</li>
<li><code>元素名称[属性名~=&quot;xxx&quot;] &#123;&#125;</code> ：属性值是一个词列表，并且以空格隔开，其中词列表中包含了 xxx</li>
<li><code>元素名称[属性名|=&quot;xxx&quot;] &#123;&#125;</code> ：特定属性选择器，该属性值是 value 或者以 value- 开头的值（如 zh-cn）</li>
</ul>
<p>也可以混合使用，选择多个属性多个属性值的：</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[href]</span><span class="hljs-selector-attr">[title=<span class="hljs-string">&quot;link&quot;</span>]</span> &#123;<br>    ...<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h5 id="伪类选择器"><a href="#伪类选择器" class="headerlink" title="伪类选择器"></a>伪类选择器</h5><p>选择一些元素具有的状态</p>
<p>语法： <code>E:pseudo-class &#123;property: value;&#125;</code> </p>
<h6 id="动态伪类"><a href="#动态伪类" class="headerlink" title="动态伪类"></a>动态伪类</h6><ul>
<li>:link ：初始化的状态</li>
<li>:visited ：被访问过的状态</li>
<li>:hover ：鼠标悬浮状态（常用）</li>
<li>:active ：正在访问状态</li>
</ul>
<p>注意顺序： link -&gt; visited -&gt; hover -&gt; active  不可以调换</p>
<p>常用于自定义超链接样式</p>
<ul>
<li>:focus ：聚焦的状态</li>
</ul>
<h6 id="结构伪类"><a href="#结构伪类" class="headerlink" title="结构伪类"></a>结构伪类</h6><ul>
<li><p>:first-child ：首个子元素</p>
</li>
<li><p>:last-child ：最后一个子元素</p>
</li>
<li><p>:nth-child(n) ：</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child</span>(length) <span class="hljs-comment">/* 参数是具体数字，表示选择第几个 */</span><br><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child</span>(n) <span class="hljs-comment">/* 参数是 n，n 从 0 开始算,会选中所有的子元素 */</span><br><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child</span>(n*length) <span class="hljs-comment">/* n 的倍数选择，n 从 0 开始算 */</span><br><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child</span>(n+length) <span class="hljs-comment">/* 选择大于等于 length 的元素 */</span><br><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child</span>(-n+length) <span class="hljs-comment">/* 选择小于等于 length 的元素 */</span><br><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child</span>(n*length-<span class="hljs-number">1</span>) <span class="hljs-comment">/* 表示隔几(length)选一 */</span><br></code></pre></div></td></tr></table></figure>

<ul>
<li>even === 2n –&gt; 偶数项</li>
<li>odd === 2n-1 –&gt; 奇数项</li>
<li>只能是字母 n，其他的没有效果</li>
</ul>
</li>
<li><p>:nth-last-child() ：从最后一个开始数，用法与 nth-child() 相同</p>
</li>
<li><p>:nth-of-type() ：用法类似 :nth-child()，但只计算选择器中指定的哪个元素，指定了子元素的类型</p>
</li>
<li><p>:nth-last-of-type() ：从最后一个开始计算</p>
</li>
<li><p>:first-of-type() :last-of-type() ：类似于 :first-child() 和 :last-child()</p>
</li>
<li><p>:only-child() ：表示一个元素是它的父元素的唯一一个子元素</p>
</li>
<li><p>:only-of-type() ：表示一个元素包含很多子元素，只有一种子元素是唯一的，那么就可以选中它</p>
</li>
<li><p>:empty() ：用来选择没有任何内容的元素，一个空格也没有</p>
</li>
</ul>
<p>注意：IE6~8 和 FF3及其以下版本不支持以上的结构伪类选择器</p>
<h6 id="否定伪类"><a href="#否定伪类" class="headerlink" title="否定伪类"></a>否定伪类</h6><ul>
<li>:not() 否定选择器，即排除或过滤掉特定元素。</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">:not</span>(<span class="hljs-selector-attr">[type=<span class="hljs-string">&quot;submit&quot;</span>]</span>) &#123; <span class="hljs-comment">/* 选择除提交按钮外的其他表单元素 */</span><br>    <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid red;<br>&#125; <br></code></pre></div></td></tr></table></figure>

<p>注意：IE6~8 及其以下版本不支持否定伪类选择器</p>
<h6 id="状态伪类"><a href="#状态伪类" class="headerlink" title="状态伪类"></a>状态伪类</h6><p>UI元素（User Interface 用户界面）一般是指包含在 form 内的表单元素，其状态一般包括：可用不可用、选中未选中、获得或失去焦点、锁定、待机等</p>
<ul>
<li>:enabled() 表示匹配指定范围内所有可用 UI元素，匹配文本框，不匹配按钮</li>
<li>:disabled() 表示匹配指定范围内所有不可用 UI元素，匹配按钮，不匹配文本框</li>
<li>:checked() 表示匹配指定范围内所有可用 UI元素，匹配单选按钮</li>
</ul>
<p>注意：IE6~8 及其以下版本不支持状态伪类选择器</p>
<h6 id="目标伪类"><a href="#目标伪类" class="headerlink" title="目标伪类"></a>目标伪类</h6><ul>
<li>:target ：匹配所有指定目标元素中被相关 URL 指向的（比如锚点链接指向）</li>
</ul>
<p>注意：IE6~8 及其以下版本不支持目标伪类选择器</p>
<h5 id="伪元素选择器"><a href="#伪元素选择器" class="headerlink" title="伪元素选择器"></a>伪元素选择器</h5><p>语法： <code>元素::状态 &#123;&#125;</code> </p>
<ul>
<li>::first-letter ：选择第一个字</li>
<li>::first-line ：选择第一行</li>
<li>::selection ：选中文字时改变样式</li>
<li><code>::before &#123;content: &quot;xxx&quot;&#125;</code> ：在内部前面插入 xxx</li>
<li><code>::before &#123;after: &quot;xxx&quot;&#125;</code> ：在内部后面插入 xxx</li>
</ul>
<h3 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h3><h4 id="单位"><a href="#单位" class="headerlink" title="单位"></a>单位</h4><h5 id="绝对单位"><a href="#绝对单位" class="headerlink" title="绝对单位"></a>绝对单位</h5><ul>
<li>in（inch，英寸）</li>
<li>cm（centimerter，厘米）</li>
<li>mm（millimeter，毫米）</li>
<li>pt（point，印刷的点数）</li>
<li>pc（pica，1pc == 12pt）</li>
<li>另外，xx-small | x-small | small | medium | large | x-large | xx-large 这些关键词也是绝对单位</li>
</ul>
<h5 id="相对单位"><a href="#相对单位" class="headerlink" title="相对单位"></a>相对单位</h5><ul>
<li><p>px 像素</p>
<ul>
<li>根据屏幕的像素点的尺寸变化而变化，不同分辨率的屏幕所显示的像素字体大小是不同的</li>
<li>屏幕分辨率越大，相同像素字体就显得越小</li>
</ul>
</li>
<li><p>em 相对于父辈字体的大小来定义字体大小，1em 即是 父级一个字体大小</p>
</li>
<li><p>ex 相对于父辈字体的 x 高度来定义字体大小</p>
<ul>
<li>ex 单位大小既取决于字体的大小，也取决于字体类型</li>
<li>在固定大小的情况下，实际的 x 高度随字体类型不同而不同</li>
</ul>
</li>
<li><p>% 以百分比的形式定义字体大小，于 em 效果相同，相对于父辈字体大小来定义</p>
</li>
<li><p>larger 和 smaller 将以父元素的字体大小为参考进行换算</p>
</li>
</ul>
<h4 id="颜色表示"><a href="#颜色表示" class="headerlink" title="颜色表示"></a>颜色表示</h4><ul>
<li>颜色名：使用颜色名，如：red，pink，skyblue</li>
<li>十六进制：0~F 如： #fff，#6E6E6E，#000000</li>
<li>RGB：rgb(0<del>255, 0</del>255, 0~255)，其中也可以是百分比值</li>
</ul>
<p>CSS3 新支持以下三种颜色表示法：</p>
<ul>
<li><p>RGBA：在 RGB 颜色的基础上增加了 Alpha 通道，起到定义半透明的颜色，取值 0~1，越低越透明</p>
</li>
<li><p>HSL：色相(Hue)、饱和度(Saturation) 和 亮度(Lightness) 表示颜色</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">hsl(&lt;length&gt;, &lt;percentage&gt;, &lt;percentage&gt;)<br></code></pre></div></td></tr></table></figure></li>
<li><p>HSLA：和 RGBA 同理，添加透明通道</p>
</li>
</ul>
<h4 id="渐变"><a href="#渐变" class="headerlink" title="渐变"></a>渐变</h4><h5 id="Webkit-渐变"><a href="#Webkit-渐变" class="headerlink" title="Webkit 渐变"></a>Webkit 渐变</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">-webkit-gradient(&lt;type&gt;, &lt;point&gt; <span class="hljs-selector-attr">[, &lt;radius&gt;]</span>?, &lt;point&gt; <span class="hljs-selector-attr">[,&lt;radius&gt;]</span>? <span class="hljs-selector-attr">[,&lt;stop&gt;]</span>*)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>type：定义渐变类型，包括线性渐变（linear）和 径向渐变（radial）</li>
<li>point：定义渐变起始点和结束点坐标，即开始应用渐变的 x轴 和 y轴 坐标，以及结束渐变的坐标，(0, 0)、(left, top)、top、bottom、left、right</li>
<li>radius：当定义径向渐变时，用来设置径向渐变的长度，为一个数值</li>
<li>stop：定义渐变色和步长<ul>
<li>from(colorvalue)：开始的颜色</li>
<li>to(colorvalue)：结束的颜色</li>
<li>color-stop(value, colorvalue)：颜色步长、包含两个参数值，第一个为数值，第二个为颜色值</li>
</ul>
</li>
</ul>
<h5 id="Gecko-渐变"><a href="#Gecko-渐变" class="headerlink" title="Gecko 渐变"></a>Gecko 渐变</h5><h6 id="线性渐变"><a href="#线性渐变" class="headerlink" title="线性渐变"></a>线性渐变</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">-moz-linear-gradient(<span class="hljs-selector-attr">[&lt;point&gt; || &lt;angle&gt;,]</span>? &lt;stop&gt;, &lt;stop&gt; <span class="hljs-selector-attr">[,&lt;stop&gt;]</span>*)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>point：定义渐变起始点</li>
<li>angle：定义直线渐变的角度</li>
<li>stop：定义步长，用法与 Webkit 的 color-stop() 函数相似</li>
</ul>
<h6 id="径向渐变"><a href="#径向渐变" class="headerlink" title="径向渐变"></a>径向渐变</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">-moz-radial-gradient(<span class="hljs-selector-attr">[&lt;position&gt; || &lt;angle&gt;,]</span>? <span class="hljs-selector-attr">[&lt;shape&gt; || &lt;size&gt;,]</span>? &lt;stop&gt;, &lt;stop&gt; <span class="hljs-selector-attr">[,&lt;stop&gt;]</span>*)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>point：定义渐变起始点</li>
<li>angle：定义渐变的角度</li>
<li>shape：定义径向渐变的形状</li>
<li>size：定义圆半径，或者椭圆的轴长度</li>
<li>stop：定义步长，用法与 Webkit 的 color-stop() 函数相似</li>
</ul>
<h5 id="W3C-渐变"><a href="#W3C-渐变" class="headerlink" title="W3C 渐变"></a>W3C 渐变</h5><p>沿袭 Gecko 引擎的渐变设计方法，语法与用法也基本相同</p>
<h6 id="线性渐变-1"><a href="#线性渐变-1" class="headerlink" title="线性渐变"></a>线性渐变</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">linear-gradient(<span class="hljs-selector-attr">[[angle]</span> | <span class="hljs-selector-tag">to</span>&lt;side-or-corner&gt;,]? &lt;<span class="hljs-attribute">color</span>-stop&gt;<span class="hljs-selector-attr">[, &lt;color-stop&gt;]</span>+)<br></code></pre></div></td></tr></table></figure>

<h6 id="径向渐变-1"><a href="#径向渐变-1" class="headerlink" title="径向渐变"></a>径向渐变</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">radial-gradient(<span class="hljs-selector-attr">[[&lt;shape&gt; || &lt;size&gt;]</span><span class="hljs-selector-attr">[at&lt;position&gt;]</span>?, | at&lt;<span class="hljs-attribute">position</span>&gt;, ]? &lt;<span class="hljs-attribute">color</span>-stop&gt;<span class="hljs-selector-attr">[, &lt;color-stop&gt;]</span>+)<br></code></pre></div></td></tr></table></figure>

<h4 id="字体样式"><a href="#字体样式" class="headerlink" title="字体样式"></a>字体样式</h4><h5 id="font-size-字体大小"><a href="#font-size-字体大小" class="headerlink" title="font-size 字体大小"></a>font-size 字体大小</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">font-size</span>: xx-small | x-small | small | medium | large | x-large | xx-large | larger | normal | smaller | length<br></code></pre></div></td></tr></table></figure>

<ul>
<li>前面的表示绝对字体尺寸</li>
<li>larger 和 smaller 表示相对的大小，根据父对象中字体尺寸进行相对增大和缩小处理</li>
<li>length 可以是百分数、浮点数或单位标识符组成的长度值，不可谓负值</li>
</ul>
<h5 id="font-family-字体"><a href="#font-family-字体" class="headerlink" title="font-family 字体"></a>font-family 字体</h5><ul>
<li>各种字体之间用 <code>,</code> 分隔开</li>
<li>中文字体需要加英文引号，英文字体一般不需要加引号</li>
<li>如果字体中包含 <code> </code>(空格) <code>#</code> <code>$</code> 等符号，则必须加引号</li>
<li>Unicode 编码表示字体：<ul>
<li><code>\5B8B\4F53</code>  ==  SimSun  –&gt;  宋体</li>
<li><code>\5FAE\8F6F\96C5\9ED1</code>  ==  Microsoft YaHei  –&gt;  微软雅黑</li>
</ul>
</li>
</ul>
<h5 id="font-weight-字体粗细"><a href="#font-weight-字体粗细" class="headerlink" title="font-weight 字体粗细"></a>font-weight 字体粗细</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">font-weight</span>: <span class="hljs-number">100</span> | <span class="hljs-number">200</span> | <span class="hljs-number">300</span> | <span class="hljs-number">400</span> | <span class="hljs-number">500</span> | <span class="hljs-number">600</span> | <span class="hljs-number">700</span> | <span class="hljs-number">800</span> | <span class="hljs-number">900</span> | normal | bold | bolder | lighter<br></code></pre></div></td></tr></table></figure>

<ul>
<li>可以使用数字，可选数值为 100 的整数倍， 100 ~ 900，越大越粗</li>
<li>normal == 400；<strong>bold</strong> === 700   &lt; 较为常用</li>
<li>bolder：相对于 normal 字体较粗；lighter：相对于 normal 字体较细</li>
</ul>
<h5 id="font-style-字体样式"><a href="#font-style-字体样式" class="headerlink" title="font-style 字体样式"></a>font-style 字体样式</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">font-style</span>: normal | italic | oblique<br></code></pre></div></td></tr></table></figure>

<ul>
<li>normal：普通</li>
<li>italic：斜体</li>
<li>oblique：倾斜的字体</li>
</ul>
<p>italic 和 oblique 只能在英文等西方文字中有效</p>
<h5 id="color-字体颜色"><a href="#color-字体颜色" class="headerlink" title="color 字体颜色"></a>color 字体颜色</h5><p>使用相应颜色表示法即可</p>
<h5 id="text-decoration-字体划线效果"><a href="#text-decoration-字体划线效果" class="headerlink" title="text-decoration 字体划线效果"></a>text-decoration 字体划线效果</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">text-decoration</span>: normal | none | underline | blink | overline | line-through<br></code></pre></div></td></tr></table></figure>

<ul>
<li>normal：默认值</li>
<li>none：取消划线效果</li>
<li>underline：下划线效果</li>
<li>blink：闪烁效果</li>
<li>line-through：贯穿线效果（即中划线）</li>
<li>overline：上划线效果</li>
</ul>
<p>可以多个值混合使用，如：<code>text-decoration: line-through overline underline;</code> 达到显示上中下三条划线效果</p>
<p>常用：取消 a 链接 默认下划线样式：<code>text-decoration: none;</code> </p>
<h5 id="font-variant-定义小型大写字母"><a href="#font-variant-定义小型大写字母" class="headerlink" title="font-variant 定义小型大写字母"></a>font-variant 定义小型大写字母</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">font-variant</span>: normal | small-caps<br></code></pre></div></td></tr></table></figure>

<ul>
<li>normal：默认值，即正常的字体</li>
<li>snall-caps：小型的大写字母字体</li>
</ul>
<p>仅支持以英文为代表的西文字体</p>
<h5 id="text-transform-单词大小写"><a href="#text-transform-单词大小写" class="headerlink" title="text-transform 单词大小写"></a>text-transform 单词大小写</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">text-transform</span>: none | capitalize | uppercase | lowercase<br></code></pre></div></td></tr></table></figure>

<ul>
<li>none：默认值，无转换发生</li>
<li>capitalize：将每个单词的第一个字母转换成大写，其余无转换</li>
<li>uppercase：所有字母转换为大写</li>
<li>lowercase：所有字母转换为小写</li>
</ul>
<h5 id="font-face-自定义字体类型"><a href="#font-face-自定义字体类型" class="headerlink" title="@font-face 自定义字体类型"></a>@font-face 自定义字体类型</h5><p>能够加载服务器端的字体文件</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-keyword">@font-face</span> &#123;<br>    <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&quot;设置文本的字体名称&quot;</span>;<br>    <span class="hljs-attribute">font-style</span>: 设置文本样式;<br>    <span class="hljs-attribute">font-variant</span>: 设置文本是否大小写;<br>    <span class="hljs-attribute">font-weight</span>: 设置文本的粗细;<br>    <span class="hljs-attribute">font-stretch</span>: 设置文本是否横向的拉伸变形;<br>    <span class="hljs-attribute">font-size</span>： 设置文本字体大小;<br>    <span class="hljs-attribute">src</span>: 设置自定义字体的相对路径或绝对路径;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h4 id="文本样式"><a href="#文本样式" class="headerlink" title="文本样式"></a>文本样式</h4><h5 id="text-align-水平对齐"><a href="#text-align-水平对齐" class="headerlink" title="text-align 水平对齐 *"></a>text-align 水平对齐 *</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">text-align</span>: left | right | center | justify<br></code></pre></div></td></tr></table></figure>

<ul>
<li>left：左对齐，默认值</li>
<li>rigth：右对齐</li>
<li>center：居中对齐</li>
<li>justify：两端对齐</li>
</ul>
<p>CSS3 新增四个属性：</p>
<ul>
<li>start | end | match-parent | justify-all</li>
<li>浏览器支持不是很好</li>
</ul>
<h5 id="vertical-align-垂直对齐"><a href="#vertical-align-垂直对齐" class="headerlink" title="vertical-align 垂直对齐 *"></a>vertical-align 垂直对齐 *</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">vertical-align</span>: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length<br></code></pre></div></td></tr></table></figure>

<ul>
<li>auto：根据 layout-flow 的值对齐对象内容</li>
<li>baseline：默认值，表示将支持 valign 特性的对象内容与基线对齐</li>
<li>sub：表示垂直对齐文本的下标</li>
<li>super：表示垂直对齐文本的上标</li>
<li>top：对象的内容与对象顶端对齐</li>
<li>text-top：对象的文本与对象顶端对齐</li>
<li>middle：对象的内容与对象中部对齐</li>
<li>bottom：对象的内容与对象底端对齐</li>
<li>text-bottom：对象的文本与对象底端对齐</li>
<li>length：表示由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线(0,0%)算起的偏移量</li>
</ul>
<h5 id="letter-spacing-字间距"><a href="#letter-spacing-字间距" class="headerlink" title="letter-spacing 字间距"></a>letter-spacing 字间距</h5><p>取值为长度值</p>
<h5 id="word-spacing-词间距"><a href="#word-spacing-词间距" class="headerlink" title="word-spacing 词间距"></a>word-spacing 词间距</h5><p>取值为长度值，默认值为 normal，表示默认间隔，以空格作为识别的分界线</p>
<h5 id="line-height-行高"><a href="#line-height-行高" class="headerlink" title="line-height 行高 *"></a>line-height 行高 *</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">line-height</span>: normal | length;<br></code></pre></div></td></tr></table></figure>

<ul>
<li>normal：默认值，一般为 1.2em</li>
<li>length 为长度值，允许为负值，可以不写单位，灵活继承父级单位</li>
<li>一般行高的最佳设置范围为 1.2em~1.8em</li>
<li>可以遵循字体越大，行高越小的原则来定义</li>
</ul>
<h5 id="text-indent-首行缩进"><a href="#text-indent-首行缩进" class="headerlink" title="text-indent 首行缩进"></a>text-indent 首行缩进</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">text-indent</span>: length /* (<span class="hljs-number">2em</span>) */<br></code></pre></div></td></tr></table></figure>

<ul>
<li>length 为长度值，允许为负值</li>
<li>可以巧用：将不想显示的文本缩进出窗口外 <code>text-indent: -9999px;</code> </li>
<li>建议以 em 为设置单位</li>
</ul>
<h5 id="text-shadow-文字阴影"><a href="#text-shadow-文字阴影" class="headerlink" title="text-shadow 文字阴影"></a>text-shadow 文字阴影</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">text-shadow</span>: none || 水平偏移值 垂直偏移值 阴影模糊值 阴影颜色<br></code></pre></div></td></tr></table></figure>

<ul>
<li>none：无阴影</li>
<li>前两个参数必须写，后两个可以省略</li>
<li>前两个参数，正值偏右或偏下，负值相反</li>
<li>阴影模糊值是一个长度值，不允许为负值</li>
<li>模糊距离越大越虚</li>
<li>颜色设置可以在调换到任意位置</li>
<li>如未设置颜色，则继承自 color 属性的颜色</li>
<li>设置多个阴影效果用 <code>,</code> 分隔</li>
<li>可以使用在 :first-letter 和 :first-line 伪元素上</li>
<li>在左上和右下各补一个1像素错位的补色阴影，可以起到外凸内凹的效果</li>
</ul>
<h5 id="text-overflow-溢出文本"><a href="#text-overflow-溢出文本" class="headerlink" title="text-overflow 溢出文本"></a>text-overflow 溢出文本</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">text-overflow</span>: clip | ellipsis | elipsis-word<br></code></pre></div></td></tr></table></figure>

<ul>
<li>clip：不显示省略标记 <code>…</code> ，简单的裁切</li>
<li>ellipsis：当对象文本溢出时显示省略标记 <code>…</code> ，插入位置是最后一个字符</li>
<li>ellipsis-word：当对象文本溢出时显示省略标记 <code>…</code> ，插入位置是最后一个词</li>
</ul>
<p>要实现已出现是省略号的效果，还需要设置两个属性：</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">white-space</span>: nowrap; <span class="hljs-comment">/* 强制文本在一行内显示 */</span><span class="hljs-attribute">overflow</span>: hidden; <span class="hljs-comment">/* 溢出隐藏 */</span><br></code></pre></div></td></tr></table></figure>

<h5 id="word-wrap-文本换行"><a href="#word-wrap-文本换行" class="headerlink" title="word-wrap 文本换行"></a>word-wrap 文本换行</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">word-wrap</span>: normal | break-word<br></code></pre></div></td></tr></table></figure>

<ul>
<li>normal：表示控制连续文本换行</li>
<li>break-word：内容将在边界内换行</li>
</ul>
<h5 id="content-添加动态内容"><a href="#content-添加动态内容" class="headerlink" title="content 添加动态内容"></a>content 添加动态内容</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">content</span>: normal | string | <span class="hljs-built_in">attr</span>() | <span class="hljs-built_in">uri</span>() | <span class="hljs-built_in">counter</span>() | none<br></code></pre></div></td></tr></table></figure>

<ul>
<li>normal：默认值</li>
<li>string：插入文本内容</li>
<li>attr()：插入元素的属性值</li>
<li>uri()：插入一个外部资源，如图像、音频、视频或浏览器支持的其他任何资源</li>
<li>counter()：计数器，用于插入排序标识</li>
<li>none：无任何内容</li>
</ul>
<p>一般和 ::before 一起使用，也可以单独使用</p>
<h4 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h4><h5 id="border-spacing-分离单元格间距"><a href="#border-spacing-分离单元格间距" class="headerlink" title="border-spacing 分离单元格间距"></a>border-spacing 分离单元格间距</h5><ul>
<li>可以为一个值 或 两个值</li>
<li>两个值时，第一个值表示行间距，第二个值表示列间距</li>
</ul>
<h5 id="empty-cells-控制空单元格显示"><a href="#empty-cells-控制空单元格显示" class="headerlink" title="empty-cells 控制空单元格显示"></a>empty-cells 控制空单元格显示</h5><ul>
<li>show：显示空单元格</li>
<li>hide：隐藏空单元格</li>
<li>空单元格：指没有可视内容的单元格<ul>
<li>如果单元格的 visibility 属性值为 hidden，即便单元格包含内容，也认为是空单元格</li>
<li><code>&amp;nbsp;</code> 和 其他空白字符为可视内容</li>
<li>ASCII 字符中的 回车符(“\0D”)、换行符(“\0A”)、Tab键(“\09”)和空格键(“\20”)表示不可视内容</li>
</ul>
</li>
</ul>
<p>如果表格行中所有单元格的 empty-cells 属性都为 hide，且都不包含任何可视内容，那么整行就等于设置了 display: none</p>
<h5 id="caption-side-表格标题位置"><a href="#caption-side-表格标题位置" class="headerlink" title="caption-side 表格标题位置"></a>caption-side 表格标题位置</h5><p>定义标题的显示位置</p>
<ul>
<li>top（表格上面） | bottom（表格底部） | left | right</li>
</ul>
<h5 id="border-collapse-合并单元格边框"><a href="#border-collapse-合并单元格边框" class="headerlink" title="border-collapse 合并单元格边框"></a>border-collapse 合并单元格边框</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">border-collapse</span>: collapse; <span class="hljs-comment">/* 合并单元格边框 */</span><br></code></pre></div></td></tr></table></figure>

<h4 id="显示类型"><a href="#显示类型" class="headerlink" title="显示类型"></a>显示类型</h4><h5 id="display-显示类型"><a href="#display-显示类型" class="headerlink" title="display 显示类型"></a>display 显示类型</h5><p>css2.1 中，display 属性共有 18 个选项值</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td><strong>block</strong></td>
<td>块状显示，在元素后面添加换行符，即其他元素不能在后面并列显示</td>
</tr>
<tr>
<td><strong>none</strong></td>
<td>隐藏显示，不会为被隐藏的元素保留位置，而 visibility: hidden 会<br>表示隐藏的同时取消盒模型</td>
</tr>
<tr>
<td><strong>inline</strong></td>
<td>行内显示，在元素后面删除换行符，多个元素可以在一行内并列显示</td>
</tr>
<tr>
<td>inline-block</td>
<td>行内显示，但是元素的内容以块状显示，行内其他行内元素还会显示在同一行内</td>
</tr>
<tr>
<td>compact</td>
<td>紧凑的块状显示，基于内容上的行内显示</td>
</tr>
<tr>
<td>marker</td>
<td>在容器对象之前或之后显示，必须与 :after 或 :before 伪元素一起用</td>
</tr>
<tr>
<td>lnline-table</td>
<td>具有行内特征的表格显示</td>
</tr>
<tr>
<td><strong>list-item</strong></td>
<td>具有块状特征的列表项目显示，并可以添加可选项目标志，增加了缩进和i项目符号</td>
</tr>
<tr>
<td>run-in</td>
<td>块状显示或基于内容之上的行内显示</td>
</tr>
<tr>
<td>table</td>
<td>具有块状特征的表格显示</td>
</tr>
<tr>
<td>table-caption</td>
<td>表格标题显示</td>
</tr>
<tr>
<td>table-cell</td>
<td>表格单元格显示</td>
</tr>
<tr>
<td>table-column</td>
<td>表格列显示</td>
</tr>
<tr>
<td>table-column-group</td>
<td>表格列组显示</td>
</tr>
<tr>
<td>table-row</td>
<td>表格行显示</td>
</tr>
<tr>
<td>table-row-group</td>
<td>表格行组显示</td>
</tr>
<tr>
<td>table-header-group</td>
<td>表格标题组显示</td>
</tr>
<tr>
<td>table-footer-group</td>
<td>表格页脚组显示</td>
</tr>
</tbody></table>
<p>常用显示类型都可以划分为 block 和 inline 两种类型</p>
<h5 id="float-浮动显示"><a href="#float-浮动显示" class="headerlink" title="float 浮动显示"></a>float 浮动显示</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">float</span>: left | right | none<br></code></pre></div></td></tr></table></figure>

<ul>
<li>left：元素向左浮动</li>
<li>right：元素向右浮动</li>
<li>none：默认值，表示消除浮动</li>
</ul>
<h6 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h6><ol>
<li>浮动元素以块状显示，可以定义 height 和width</li>
<li>浮动元素与流动元素可以混合使用，不会重叠，都遵循向上后下的显示规则，都受到文档流影响</li>
<li>仅能改变水平显示方式，不能改变垂直显示方式</li>
<li>浮动元素可以并列显示，如果包含框宽度不够，则会错行显示</li>
</ol>
<h6 id="clear-清除浮动"><a href="#clear-清除浮动" class="headerlink" title="clear 清除浮动"></a>clear 清除浮动</h6><p>不是清除浮动元素，而是清除本身，即不允许当前元素与浮动元素并列显示</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">clear</span>: left | right | both | none <br></code></pre></div></td></tr></table></figure>

<ul>
<li>left：清除左边的浮动元素，如果左边存在浮动元素，则当前元素会换行显示</li>
<li>right：清除右边的浮动元素，如果右边存在浮动元素，则当前元素会换行显示</li>
<li>both：清除左右两边的浮动元素，不管哪边存在浮动对象，当前元素都会换行显示</li>
<li>none：默认值，允许两边都可以存在浮动元素，当前元素不会主动换行显示</li>
</ul>
<p>clear 属性是专门针对 float 属性而设计的，依次仅能够对左右两侧浮动元素有效，对于非浮动元素是无效的</p>
<p>在结构最后添加：</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-id">#contain</span> &#123; <span class="hljs-attribute">background</span>: pink; &#125; <span class="hljs-comment">/* 包含元素 */</span></span><br><span class="css">    <span class="hljs-selector-tag">span</span> &#123; <span class="hljs-attribute">float</span>: left; <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>; &#125; <span class="hljs-comment">/* 定义共同属性 */</span></span><br><span class="css">    <span class="hljs-selector-id">#span1</span> &#123; <span class="hljs-attribute">border</span>: <span class="hljs-number">10px</span> soild blue; &#125;</span><br><span class="css">    <span class="hljs-selector-id">#span2</span> &#123; <span class="hljs-attribute">border</span>: <span class="hljs-number">10px</span> soild red; &#125;</span><br><span class="css">    <span class="hljs-selector-class">.clear</span> &#123; <span class="hljs-attribute">clear</span>: both; &#125; <span class="hljs-comment">/* 定义清除类，清除浮动 */</span></span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;contain&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;span1&quot;</span>&gt;</span>span 元素浮动<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;span2&quot;</span>&gt;</span>span 元素浮动<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;clear&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>	<span class="hljs-comment">&lt;!-- 添加一个清除元素 --&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h5 id="position-定位显示"><a href="#position-定位显示" class="headerlink" title="position 定位显示"></a>position 定位显示</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">position</span>: static | relative | absolute | fixed<br></code></pre></div></td></tr></table></figure>

<ul>
<li>static：默认值，表示不定位，元素遵循 HTML 默认的流动模型</li>
<li>relative：表示相对定位，通过 top bottom left right 属性确定元素在正常文档流中的偏移位置，发生偏移后元素对象原空间保留不变</li>
<li>absolute：表示绝对定位，叫元素从文档流中拖出来，然后使用 top bottom left right 属性相对于其最接近的一个具有定位属性的父定位包含框进行绝对定位<ul>
<li>如果不存在有定位的上级元素，则相对于浏览器窗口定位，层叠顺序通过 z-index 属性来定义</li>
</ul>
</li>
<li>fixed：表示固定定位、粘性定位，相对于视图本身固定，不会随浏览器窗口的滚动而变化，该元素会始终位于浏览器窗口内视图的某个位置，通过 top bottom left right 属性设置位置，不会受文档流动影响，与 background-attachment: fixed 属性功能相同</li>
</ul>
<p>绝对定位元素以块状显示</p>
<p>设置相对定位元素在可视区之外，不会出现滚动条，而绝对元素会</p>
<p>一般来说：子绝（absolute）父相（relative）</p>
<h6 id="z-index-定位层叠"><a href="#z-index-定位层叠" class="headerlink" title="z-index 定位层叠"></a>z-index 定位层叠</h6><p>通过z-index 属性来确定定位元素的层叠等级</p>
<ul>
<li>只有在元素的 position 属性取值为 relation absolute fixed 时才可以使用</li>
<li>z-index 属性值越大，层叠级别就越高，如果属性值相同，则根据结构顺序层叠</li>
<li>未指定的默认为 0，属性值为正数的在其之上，为负数的在其之下</li>
<li>IE 不支持 fixed 使用 z-index</li>
</ul>
<h5 id="columns-多列布局"><a href="#columns-多列布局" class="headerlink" title="columns 多列布局"></a>columns 多列布局</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">columns</span>: column-width || column-count<br></code></pre></div></td></tr></table></figure>

<ul>
<li>column-width：定义每列的宽度</li>
<li>column-count：定义列数</li>
<li>适用于不可替换的块元素、行内块元素、单元格，但是表格元素除外</li>
<li>Webkit 引擎支持 -webkit-columns 私有属性</li>
<li>Mozilla Gecko 引擎支持 -moz-columns 私有属性</li>
</ul>
<h6 id="column-width-设置列宽"><a href="#column-width-设置列宽" class="headerlink" title="column-width 设置列宽"></a>column-width 设置列宽</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">column-width</span>: length | auto<br></code></pre></div></td></tr></table></figure>

<ul>
<li>length：长度值，不可为负值</li>
<li>auto：根据浏览器自动计算来设置</li>
<li>引擎私有属性格式同 columns</li>
</ul>
<h6 id="column-count-设置列数"><a href="#column-count-设置列数" class="headerlink" title="column-count 设置列数"></a>column-count 设置列数</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">column-count</span>: integer | auto<br></code></pre></div></td></tr></table></figure>

<ul>
<li>integer：定义栏目的列数，取值为大于 0 的整数</li>
<li>auto：根据浏览器计算值自动设置</li>
<li>引擎私有属性格式同 columns</li>
</ul>
<h6 id="column-gap-设置列间距"><a href="#column-gap-设置列间距" class="headerlink" title="column-gap 设置列间距"></a>column-gap 设置列间距</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">column-width</span>: normal | length<br></code></pre></div></td></tr></table></figure>

<ul>
<li>normal：根据浏览器默认设置进行解析，一般为 1em</li>
<li>length：长度值，不可为负值</li>
<li>引擎私有属性格式同 columns</li>
</ul>
<h6 id="column-rule-设置列边框样式"><a href="#column-rule-设置列边框样式" class="headerlink" title="column-rule 设置列边框样式"></a>column-rule 设置列边框样式</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">column-rule</span>: length | style | color | transparent<br></code></pre></div></td></tr></table></figure>

<ul>
<li>length：长度值，不可为负值，功能与 column-rule-width 属性相同</li>
<li>style：定义列边框样式，功能与 column-rule-style 属性相同</li>
<li>color：定义列边框的颜色，功能与 column-rule-color 属性相同</li>
<li>transparent：设置边框透明显示</li>
<li>派生属性：column-rule-width &amp; column-rule-style &amp; olumn-rule-color</li>
</ul>
<h6 id="column-span-设置跨列显示"><a href="#column-span-设置跨列显示" class="headerlink" title="column-span 设置跨列显示"></a>column-span 设置跨列显示</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">column-span</span>: none | all<br></code></pre></div></td></tr></table></figure>

<ul>
<li>none：只在本栏中显示</li>
<li>all：将横跨所有列</li>
</ul>
<h6 id="column-fill-设置列高度"><a href="#column-fill-设置列高度" class="headerlink" title="column-fill 设置列高度"></a>column-fill 设置列高度</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">column-fill</span>: auto | balance<br></code></pre></div></td></tr></table></figure>

<ul>
<li>auto：各列的高度随其内容的变化而自动变化</li>
<li>balance：初始值，各列的高度会根据内容最多的那一列的高度进行统一</li>
</ul>
<h4 id="弹性盒模型（伸缩盒模型）"><a href="#弹性盒模型（伸缩盒模型）" class="headerlink" title="弹性盒模型（伸缩盒模型）"></a>弹性盒模型（伸缩盒模型）</h4><h5 id="display-flex-定义"><a href="#display-flex-定义" class="headerlink" title="display: flex 定义"></a>display: flex 定义</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">display</span>: box | inline-box | flexbox | inline-flexbox | flex | inline-flex<br></code></pre></div></td></tr></table></figure>

<ul>
<li>box：将对象作为弹性伸缩盒显示，伸缩盒为最老版本</li>
<li>inline-box： 将对象作为内联块级弹性伸缩盒显示，伸缩盒为最老版本</li>
<li>flexbox：将对象作为弹性伸缩盒显示，伸缩盒为过渡版本</li>
<li>inline-flexbox： 将对象作为内联块级弹性伸缩盒显示，伸缩盒为过渡版本</li>
<li>flex：将对象作为弹性伸缩盒显示，伸缩盒为最新版本</li>
<li>inline-flex： 将对象作为内联块级弹性伸缩盒显示，伸缩盒为最新版本</li>
</ul>
<p>目前最稳定最新的使用 <code>display: flex | inline-flex</code> 即可</p>
<p>CSS 的 colums、float、clear、vertical-align 属性在伸缩项目上没有效果</p>
<h5 id="flex-direction-定义伸缩方向"><a href="#flex-direction-定义伸缩方向" class="headerlink" title="flex-direction 定义伸缩方向"></a>flex-direction 定义伸缩方向</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">flex-direction</span>: row | row-reverse | column | column-reverse<br></code></pre></div></td></tr></table></figure>

<ul>
<li>row：默认值，在 ltr 排版方式下从左向右排列；在 rtl 排版方式下从右向左排列</li>
<li>row-reverse：与 row 排列方式相反</li>
<li>column：类似于 row，只不过是从上到下排列</li>
<li>column-reverse：与 column 排列方式相反</li>
</ul>
<h5 id="flex-wrap-定义换行"><a href="#flex-wrap-定义换行" class="headerlink" title="flex-wrap 定义换行"></a>flex-wrap 定义换行</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">flex-wrap</span>: nowrap | wrap | wrap-reverse<br></code></pre></div></td></tr></table></figure>

<ul>
<li>nowrap：默认值，伸缩容器单行显示</li>
<li>wrap：伸缩容器多行显示</li>
<li>wrap-reverse：伸缩容器多行显示，只不过排列方式与 wrap 相反</li>
</ul>
<h5 id="flex-flow-复合属性"><a href="#flex-flow-复合属性" class="headerlink" title="flex-flow 复合属性"></a>flex-flow 复合属性</h5><p>是 flex-direction 和 flex-wrap 属性的符合属性，适用于伸缩容器</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">flex-flow</span>: &lt;flex-direction&gt; || &lt;flex-wrap&gt;<br></code></pre></div></td></tr></table></figure>

<p>可以同时定义伸缩容器的主轴和侧轴，其默认值为 row nowrap</p>
<h5 id="justify-content-主轴对齐"><a href="#justify-content-主轴对齐" class="headerlink" title="justify-content 主轴对齐"></a>justify-content 主轴对齐</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">justify-content</span>: flex-start | flex-end | center | space-between | space-around<br></code></pre></div></td></tr></table></figure>

<ul>
<li>flex-start：默认值，伸缩项目向一行的起始位置靠齐</li>
<li>flex-end：伸缩项目向一行的结束位置靠齐</li>
<li>center：伸缩项目向一行的中间位置靠齐</li>
<li>space-between：平均分布在行里，第一个在开始位置，最后一个在终点位置</li>
<li>space-around：伸缩项目会平均分布在行里，两端也会保留相对于中间间隔一半空间</li>
</ul>
<h5 id="align-items-侧轴对齐"><a href="#align-items-侧轴对齐" class="headerlink" title="align-items 侧轴对齐"></a>align-items 侧轴对齐</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">align-items</span>: flex-start | flex-end | center | baseline | stretch<br></code></pre></div></td></tr></table></figure>

<ul>
<li>flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边</li>
<li>flex-end：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴终点的边</li>
<li>center：伸缩项目的外边距在该行的侧轴上居中显示</li>
<li>baseline：伸缩项目根据他们的基线对齐</li>
<li>stretch：默认值，伸缩项目拉伸填充整个伸缩容器</li>
</ul>
<h5 id="align-content-伸缩行对齐"><a href="#align-content-伸缩行对齐" class="headerlink" title="align-content 伸缩行对齐"></a>align-content 伸缩行对齐</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">align-contetnt: flex-start | flex-end | center | space-between | space-around | stretch<br></code></pre></div></td></tr></table></figure>

<ul>
<li>flex-start：各行向伸缩容器的起点位置堆叠</li>
<li>flex-end：各行向伸缩容器的终点位置堆叠</li>
<li>center：各行向伸缩容器的中间位置堆叠</li>
<li>space-between：各行在伸缩容器中平均分布</li>
<li>space-around：各行在伸缩容器中平均分布，在两边各有一半的空间</li>
<li>stretch：默认值，各行将会伸展以占用剩余的空间</li>
</ul>
<h5 id="flex-定义伸缩项目"><a href="#flex-定义伸缩项目" class="headerlink" title="flex 定义伸缩项目"></a>flex 定义伸缩项目</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">flex</span>: none | [ &lt;<span class="hljs-string">&#x27;flex-grow&#x27;</span>&gt; &lt;<span class="hljs-string">&#x27;flex-shrink&#x27;</span>&gt;? || &lt;<span class="hljs-string">&#x27;flex-basis&#x27;</span>&gt; ]<br></code></pre></div></td></tr></table></figure>

<p>flex 是 flex-grow、flex-shirnk 和 flex-basis 三个属性的复合属性，适用于伸缩项目</p>
<ul>
<li>后两个参数是可选参数，默认值是 “0 1 auto”</li>
</ul>
<h6 id="flex-grow-扩展空间"><a href="#flex-grow-扩展空间" class="headerlink" title="flex-grow 扩展空间"></a>flex-grow 扩展空间</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">flex-grow</span>: &lt;number&gt;<br></code></pre></div></td></tr></table></figure>

<p>默认值为 0，负值也可以生效，接收一个不带单位的值</p>
<p>决定伸缩容器剩余空间按比例应扩展多少空间</p>
<h6 id="flex-shrink-收缩空间"><a href="#flex-shrink-收缩空间" class="headerlink" title="flex-shrink 收缩空间"></a>flex-shrink 收缩空间</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">flex-shrink</span>: &lt;number&gt;<br></code></pre></div></td></tr></table></figure>

<p>默认值为 1，负值也可以生效，与 flex-grow 功能相反</p>
<h6 id="flex-basis-伸缩比率"><a href="#flex-basis-伸缩比率" class="headerlink" title="flex-basis 伸缩比率"></a>flex-basis 伸缩比率</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">flex-basis</span>: &lt;length&gt; | auto<br></code></pre></div></td></tr></table></figure>

<p>默认值为 auto，负值不合法</p>
<h6 id="order-显示位置"><a href="#order-显示位置" class="headerlink" title="order 显示位置"></a>order 显示位置</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">order</span>: &lt;integer&gt;<br></code></pre></div></td></tr></table></figure>

<p>默认情况下，伸缩项目是按照文档流出现的先后顺序排列，使用 order 可以改变</p>
<h6 id="align-self-对齐方式"><a href="#align-self-对齐方式" class="headerlink" title="align-self 对齐方式"></a>align-self 对齐方式</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">align-self</span>: auto | flex-start | flex-end | center | baseline | stretch<br></code></pre></div></td></tr></table></figure>

<p>属性值与 align-items 的属性值相同</p>
<h4 id="传统盒模型"><a href="#传统盒模型" class="headerlink" title="传统盒模型"></a>传统盒模型</h4><p>每个盒子都有 边界（外边距 margin）、边框（border）、填充（补白、内边距 padding）、内容（content）</p>
<h5 id="width-amp-height-宽高"><a href="#width-amp-height-宽高" class="headerlink" title="width &amp; height 宽高"></a>width &amp; height 宽高</h5><ul>
<li>当图像仅定义宽度或高度，则浏览器能够自动调整横纵比，使宽和高可以协调缩放</li>
<li>也可以设置 min-width max-width min-height max-height 灵活设置盒模型的大小</li>
<li>宽度 和 高度 指 content+padding+border</li>
</ul>
<h5 id="border-边框"><a href="#border-边框" class="headerlink" title="border 边框"></a>border 边框</h5><p>默认情况下不会显示边框，但是在为图片定义超链接时会自动显示 2~3 像素宽的蓝色粗边框</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">border</span>： <span class="hljs-attribute">none</span>;<br></code></pre></div></td></tr></table></figure>

<h6 id="border-style-边框样式"><a href="#border-style-边框样式" class="headerlink" title="border-style 边框样式"></a>border-style 边框样式</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">border-style</span>: <span class="hljs-built_in">dotted</span>(点线) | <span class="hljs-built_in">dashed</span>(虚线) | <span class="hljs-built_in">soild</span>(实线) | <span class="hljs-built_in">double</span>(双线) | <span class="hljs-built_in">groove</span>(立体凹槽) | <span class="hljs-built_in">ridge</span>(立体凸槽) | <span class="hljs-built_in">inset</span>(立体凹边) | <span class="hljs-built_in">outset</span>(立体凸边) | none | hidden<br></code></pre></div></td></tr></table></figure>

<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>none</td>
<td>默认值，无边框，不受任何指定的 border-width 值影响</td>
</tr>
<tr>
<td>hidden</td>
<td>隐藏边框，IE 不支持</td>
</tr>
<tr>
<td>dotted</td>
<td>点线</td>
</tr>
<tr>
<td>dashed</td>
<td>虚线</td>
</tr>
<tr>
<td>soild</td>
<td>实线</td>
</tr>
<tr>
<td>double</td>
<td>双线边框，两线及其间隔宽度之和等于指定的 border-width 值</td>
</tr>
<tr>
<td>groove</td>
<td>3D立体凹槽</td>
</tr>
<tr>
<td>ridge</td>
<td>3D立体凸槽</td>
</tr>
<tr>
<td>inset</td>
<td>3D立体凹边</td>
</tr>
<tr>
<td>outset</td>
<td>3D立体凸边</td>
</tr>
</tbody></table>
<h6 id="border-color-边框颜色"><a href="#border-color-边框颜色" class="headerlink" title="border-color 边框颜色"></a>border-color 边框颜色</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">border-color</span>: value; <span class="hljs-comment">/* 同时设置四个边框的颜色 */</span><br><span class="hljs-attribute">border-color</span>: value value value value;<br></code></pre></div></td></tr></table></figure>

<p>也可以分别设置：border-top-color  border-bottom-color  border-left-color  border-right-color</p>
<h6 id="border-width-边框宽度"><a href="#border-width-边框宽度" class="headerlink" title="border-width 边框宽度"></a>border-width 边框宽度</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">border-width</span>: length; <span class="hljs-comment">/* 同时设置四个边框的宽度 */</span><br><span class="hljs-attribute">border-width</span>: length length length length;<br></code></pre></div></td></tr></table></figure>

<ul>
<li>也可以分别设置：border-top-width  border-bottom-width  border-left-width  border-right-width</li>
<li>可以使用关键字：thin、medium 和 thick。<ul>
<li>不同浏览器解析不同， 5px、3px、2px 或者 3px、2px、1px</li>
</ul>
</li>
</ul>
<h6 id="边框三角形"><a href="#边框三角形" class="headerlink" title="边框三角形"></a>边框三角形</h6><p>可以利用四个方向的 border-width border-color 设计出各种基于 CSS三角形</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.sanjiao</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        <span class="hljs-attribute">border-top-width</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">        <span class="hljs-comment">/* border-bottom-width: 100px; */</span></span><br><span class="css">        <span class="hljs-comment">/* border-left-width: 100px; */</span></span><br><span class="css">        <span class="hljs-attribute">border-right-width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">border-style</span>: solid;</span><br><span class="css">        <span class="hljs-attribute">border-top-color</span>: blue;</span><br><span class="css">        <span class="hljs-attribute">border-left-color</span>: blue;</span><br><span class="css">        <span class="hljs-attribute">border-bottom-color</span>: <span class="hljs-number">#FFF</span>;</span><br><span class="css">        <span class="hljs-attribute">border-right-color</span>: <span class="hljs-number">#fff</span>;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;sanjiao&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h6 id="border-image-边框背景"><a href="#border-image-边框背景" class="headerlink" title="border-image 边框背景"></a>border-image 边框背景</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">border-image</span>: none | &lt;image&gt; [&lt;number&gt; | &lt;percentage&gt;]&#123;<span class="hljs-number">1</span>,<span class="hljs-number">4</span>&#125; <span class="hljs-selector-attr">[/ &lt;border-width&gt;&#123;1,4&#125;]</span><br></code></pre></div></td></tr></table></figure>

<p>用法和 background-image 相似</p>
<ul>
<li>webkit 引擎 支持 -webkit-border-image 私有属性</li>
<li>Mozilla Gecko 引擎 支持 -moz-border-image 私有属性</li>
<li>Presto 引擎 支持 -o-border-image 私有属性</li>
<li>IE浏览器 暂不支持，也没有定义私有属性</li>
</ul>
<h5 id="border-radius-圆角边框"><a href="#border-radius-圆角边框" class="headerlink" title="border-radius 圆角边框"></a>border-radius 圆角边框</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">border-radius</span>: none | &lt;length&gt;&#123;<span class="hljs-number">1</span>,<span class="hljs-number">4</span>&#125;<span class="hljs-selector-attr">[/&lt;length&gt;&#123;1,4&#125;]</span><br></code></pre></div></td></tr></table></figure>

<ul>
<li>none：默认值，表示元素没有圆角</li>
<li>长度值，不可为负值</li>
<li>也可以包含俩个属性值，用 <code>/</code> 分隔，表示 水平半径 和 垂直半径，只有一个值的是代表这两个属性值相等</li>
<li>也可以分别设置：border-top-right-radius  border-bottom-right-radius  border-bottom-left-radius  border-top-left-radius </li>
<li>值中包含 0，则这个角就是矩形，不会显示为圆角</li>
</ul>
<h5 id="margin-定义边界"><a href="#margin-定义边界" class="headerlink" title="margin 定义边界"></a>margin 定义边界</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">margin</span>: &lt;length&gt;;<br><span class="hljs-attribute">margin</span>: top right bottom left;<br><span class="hljs-attribute">margin</span>: top left&amp;right bottom;<br><span class="hljs-attribute">margin</span>: top&amp;bottom left&amp;right;<br></code></pre></div></td></tr></table></figure>

<ul>
<li>可分别定义 margin-top margin-bottom margin-left margin-right</li>
<li>也可在margin中直接设定四个值，使用空格进行分隔，顺序是 上 右 下 左，即从顶部顺时针设置</li>
<li>某个边不定义大小，可以使用 auto(自动) 关键字代替</li>
<li>上下不同，左右同可省略最后一个参数</li>
<li>上下同，左右同，写两个参数即可</li>
<li>margin 可以取负值，强迫元素偏移原来位置，实现相对定位</li>
<li>margin: 0 auto 可以起到块状元素居中显示</li>
</ul>
<h6 id="边界重叠"><a href="#边界重叠" class="headerlink" title="边界重叠"></a>边界重叠</h6><ul>
<li>边界重叠只发生在块状元素怒，且只是垂直相邻边界才会发生重叠</li>
<li>边界重叠时，两个边界中最小的那边将被覆盖</li>
<li>只有边界才会出现重叠，补白和边框不会出现</li>
</ul>
<h5 id="padding-定义补白"><a href="#padding-定义补白" class="headerlink" title="padding 定义补白"></a>padding 定义补白</h5><p>属性值的设置与 margin 相同</p>
<ul>
<li>不可为负</li>
</ul>
<p>一般开发中，通常清除所有元素的预定义样式：</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">* &#123;<br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<h5 id="opacity-透明度"><a href="#opacity-透明度" class="headerlink" title="opacity 透明度"></a>opacity 透明度</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>~<span class="hljs-number">1</span><br></code></pre></div></td></tr></table></figure>

<p>数值越低越透明</p>
<p>早期IE使用：</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">filter</span>: <span class="hljs-built_in">alpha</span>(opacity=<span class="hljs-number">0</span>~<span class="hljs-number">1</span>);<br></code></pre></div></td></tr></table></figure>

<h5 id="box-shadow-盒子阴影"><a href="#box-shadow-盒子阴影" class="headerlink" title="box-shadow 盒子阴影"></a>box-shadow 盒子阴影</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">box-shadow</span>: none | &lt;shadow&gt; [, &lt;shadow&gt;]*;<br></code></pre></div></td></tr></table></figure>

<p>其属性值与 text-shadow 类似</p>
<ul>
<li>shadow：<code>inset &amp;&amp; [&lt;length&gt;&#123;2,4&#125; &amp;&amp; &lt;color&gt;?]</code> </li>
<li>inset：设置时时内阴影，默认为外阴影</li>
<li>也可以多个阴影效果叠加，使用 <code>,</code>  分隔</li>
</ul>
<h4 id="完整盒模型-CSS3"><a href="#完整盒模型-CSS3" class="headerlink" title="完整盒模型 CSS3"></a>完整盒模型 CSS3</h4><h5 id="box-sizing-定义尺寸解析方式"><a href="#box-sizing-定义尺寸解析方式" class="headerlink" title="box-sizing 定义尺寸解析方式"></a>box-sizing 定义尺寸解析方式</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">box-sizing</span>: content-box | border-box | inherit<br></code></pre></div></td></tr></table></figure>

<ul>
<li>content-box：初始值，维持 CSS2.1 的组成模式，即元素 width/heigth = content+border+padding</li>
<li>border-box：重新定义，width/height = content</li>
</ul>
<p>webkit引擎 支持 -webkit-border-sizing 私有属性；</p>
<p>Mozilla Gecko引擎 支持 -moz-border-sizing 私有属性；</p>
<p>Prest引擎 和 IE浏览器 直接支持该属性</p>
<h5 id="resize-拖动改变元素尺寸"><a href="#resize-拖动改变元素尺寸" class="headerlink" title="resize 拖动改变元素尺寸"></a>resize 拖动改变元素尺寸</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">resize</span>: none | both | horizontal | vertical | inherit<br></code></pre></div></td></tr></table></figure>

<ul>
<li>none：初始值，不提供尺寸调整进制</li>
<li>both：提供尺寸调整机制，允许用户调节元素的宽度和高度</li>
<li>horizontal：提供单向水平尺寸调整机制</li>
<li>vertical：提供单向垂直尺寸调整机制</li>
<li>inherit：默认继承</li>
</ul>
<h5 id="overflow-x-overflow-y-溢出处理"><a href="#overflow-x-overflow-y-溢出处理" class="headerlink" title="overflow-x overflow-y 溢出处理"></a>overflow-x overflow-y 溢出处理</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">overflow-x</span>: visiable | hidden | scroll | auto | no-display | no-contentoverflow-y: visiable | hidden | scroll | auto | no-display | no-content<br></code></pre></div></td></tr></table></figure>

<ul>
<li>visiable：默认值，不剪切内容，也不添加滚动条，元素将会被剪切为包含对象的窗口大小，且 clip 属性设置将失效</li>
<li>auto：在需要时剪切内容并添加滚动条，为 body 和 textarea 的默认值</li>
<li>hidden：不显示超出元素尺寸的内容</li>
<li>scroll：当内容超出元素尺寸，则 overflow-x 显示为横向滚动条，overflow-y 显示为纵向滚动条</li>
<li>no-display：当内容超出元素尺寸，则不显示元素，此时类似添加了 display:none 声明。仅作为交流使用</li>
<li>no-content：当内容超出元素尺寸，则不显示内容，此时类似添加了 visibility:hidden 声明。仅作为交流使用</li>
</ul>
<p>使用时应同时设置 overflow-x 和 overflow-y 的属性值，不要出现一个为 hidden，而另一个为 visiable 的情况；</p>
<p>还要避免编写依赖指定值为 visiable 的 overflow-x 和 overflow-y 属性的计算值的代码</p>
<h5 id="outline-定义轮廓"><a href="#outline-定义轮廓" class="headerlink" title="outline 定义轮廓"></a>outline 定义轮廓</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">outline</span>: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit<br></code></pre></div></td></tr></table></figure>

<ul>
<li>定义颜色、轮廓样式、宽度、偏移位置的数值</li>
<li>可以将轮廓线理解为飘在元素上方，不占位置，显不显示轮廓线不会影响文档流，也不会破坏网页布局</li>
<li>轮廓线有可能是非矩形的</li>
</ul>
<h6 id="outline-width-轮廓宽度"><a href="#outline-width-轮廓宽度" class="headerlink" title="outline-width 轮廓宽度"></a>outline-width 轮廓宽度</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">outline-width</span>: thin | medium | thick | &lt;length&gt; | inherit<br></code></pre></div></td></tr></table></figure>

<p>不允许设置负值</p>
<h6 id="outline-style-轮廓样式"><a href="#outline-style-轮廓样式" class="headerlink" title="outline-style 轮廓样式"></a>outline-style 轮廓样式</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">outline-style</span>: auto | &lt;border-style&gt; | inherit<br></code></pre></div></td></tr></table></figure>

<ul>
<li>auto：根据浏览器自动设置</li>
<li>border-style：沿用边框样式</li>
<li>inherit：默认继承</li>
</ul>
<h6 id="outline-color-轮廓颜色"><a href="#outline-color-轮廓颜色" class="headerlink" title="outline-color 轮廓颜色"></a>outline-color 轮廓颜色</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">outline-color</span>: &lt;color&gt; | invert | inherit<br></code></pre></div></td></tr></table></figure>

<ul>
<li>color：颜色类型值</li>
<li>invert：执行颜色反转（逆向的颜色），确保轮廓线在不同的背景颜色中都是可见的</li>
<li>inherit：默认继承</li>
</ul>
<h6 id="outline-offset-轮廓偏移"><a href="#outline-offset-轮廓偏移" class="headerlink" title="outline-offset 轮廓偏移"></a>outline-offset 轮廓偏移</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">outline-offset</span>: &lt;length&gt; | inherit<br></code></pre></div></td></tr></table></figure>

<p>定义轮廓距离容器的值</p>
<h4 id="背景-background"><a href="#背景-background" class="headerlink" title="背景 background"></a>背景 background</h4><h5 id="background-color-背景颜色"><a href="#background-color-背景颜色" class="headerlink" title="background-color 背景颜色"></a>background-color 背景颜色</h5><p><code>background: rgba(0, 0, 0, a);</code> 可以实现半透明</p>
<h5 id="background-image-背景图片"><a href="#background-image-背景图片" class="headerlink" title="background-image 背景图片"></a>background-image 背景图片</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">background</span>: none | <span class="hljs-built_in">url</span>()<br></code></pre></div></td></tr></table></figure>

<p>CSS3 支持 渐变背景，其规则比较复杂，使用时查看文档</p>
<h5 id="background-repeat-显示方式"><a href="#background-repeat-显示方式" class="headerlink" title="background-repeat 显示方式"></a>background-repeat 显示方式</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">background-repeat</span>: repeat-x | repeat-y | [repeat | space | round | no-repeat]&#123;<span class="hljs-number">1</span>,<span class="hljs-number">2</span>&#125;<br></code></pre></div></td></tr></table></figure>

<ul>
<li>repeat-x：背景图像在横向上平铺</li>
<li>repeat-y：背景图像在纵向上平铺</li>
<li>repeat：在横向和纵向平铺</li>
<li>no-repeat：不平铺</li>
<li>round：自动缩放到直到适应且填充满整个容器</li>
<li>space：以相同的间距平铺且填充满整个容器或某个方向</li>
</ul>
<h5 id="background-position-显示位置"><a href="#background-position-显示位置" class="headerlink" title="background-position 显示位置"></a>background-position 显示位置</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">background-position</span>: [left | center | right | top | bottom]<br></code></pre></div></td></tr></table></figure>

<ul>
<li>默认值为 0% 0%，等效于 left top</li>
</ul>
<h5 id="background-attachment-背景附着"><a href="#background-attachment-背景附着" class="headerlink" title="background-attachment 背景附着"></a>background-attachment 背景附着</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">background-attachment</span>: fixed | local | scroll<br></code></pre></div></td></tr></table></figure>

<ul>
<li>fixed：背景图像相对于浏览器窗体固定</li>
<li>local：背景图像相对于元素内容固定</li>
<li>scroll：背景图像相对于元素固定</li>
</ul>
<h5 id="background-origin-定义坐标"><a href="#background-origin-定义坐标" class="headerlink" title="background-origin 定义坐标"></a>background-origin 定义坐标</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">background-origin</span>: border-box | padding-box | content-box<br></code></pre></div></td></tr></table></figure>

<ul>
<li>border-box：从边框区域开始显示背景</li>
<li>padding-box：从补白区域开始显示背景</li>
<li>content-box：仅在内容区域显示背景</li>
</ul>
<p>Webkit 引擎还支持 -webkit-backgroundorigin</p>
<p>Mozilla Gecko 引擎支持 -moz-background-origin</p>
<h5 id="background-clip-定义裁剪区域"><a href="#background-clip-定义裁剪区域" class="headerlink" title="background-clip 定义裁剪区域"></a>background-clip 定义裁剪区域</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">background-clip</span>: border-box | padding-box | content-box | text<br></code></pre></div></td></tr></table></figure>

<ul>
<li>border-box：从边框区域开始显示背景</li>
<li>padding-box：从补白区域开始显示背景</li>
<li>content-box | content：仅在内容区域显示背景</li>
<li>text：从前景内容（如文字）区域向外裁剪背景</li>
</ul>
<p>Webkit 引擎还支持 -webkit-backgroundclip</p>
<p>Mozilla Gecko 引擎支持 -moz-background-clip</p>
<p>Presto 引擎 和 IE9+ 引擎支持该属性部分取值</p>
<p>FireFox 不支持该 text 值</p>
<h5 id="background-size-背景图片大小"><a href="#background-size-背景图片大小" class="headerlink" title="background-size 背景图片大小"></a>background-size 背景图片大小</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">background-size</span>: [&lt;length&gt; | &lt;percentage&gt; | auto]&#123;<span class="hljs-number">1</span>,<span class="hljs-number">2</span>&#125; | cover | contain;<br></code></pre></div></td></tr></table></figure>

<ul>
<li>尽量只改一个，防止图片比例被破坏</li>
<li>可以是百分比值</li>
<li>cover：图片进行等比例缩放，直到填满背景盒子</li>
<li>contain：图片进行等比例缩放，直到碰到背景框</li>
</ul>
<p>Webkit 引擎还支持 -webkit-backgroundsize</p>
<p>Mozilla Gecko 引擎支持 -moz-background-size</p>
<h5 id="background-break-定义循环方式"><a href="#background-break-定义循环方式" class="headerlink" title="background-break 定义循环方式"></a>background-break 定义循环方式</h5><p>定义平铺内联元素背景图像时的循环方式</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">background</span>-break: bounding-box | each-box | coninuous<br></code></pre></div></td></tr></table></figure>

<ul>
<li>Firefox 中使用 -moz-background-inline-policy</li>
<li>其他浏览器还不支持</li>
</ul>
<h5 id="简写"><a href="#简写" class="headerlink" title="简写"></a>简写</h5><p><code>background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;</code></p>
<p>例子： <code>background: #000 url() no-repeat fixed center -25px;</code> </p>
<p>可以设置多背景图像</p>
<p><code>background: url(1) ... , url(2) ...;</code> </p>
<ul>
<li>每组之间逗号分隔，有交集则前面的覆盖后面的</li>
<li>背景色一般设置在最后一组</li>
<li>允许多重指定的属性有：background-image，background-repeat，background-position，background-clip，background-origin，background-size</li>
</ul>
<h4 id="动画-transform"><a href="#动画-transform" class="headerlink" title="动画 transform"></a>动画 transform</h4><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">transform</span>: none | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*<br></code></pre></div></td></tr></table></figure>

<ul>
<li>初始值是 none，适用于块元素和行内元素</li>
<li>transform-function：设置变换函数，可以是一个或多个变换函数列表</li>
<li>各早期版本浏览器支持的私有属性：-webkit-transform、moz-transform、-o-tranform、-ms-tranform</li>
</ul>
<h5 id="2D-变换"><a href="#2D-变换" class="headerlink" title="2D 变换"></a>2D 变换</h5><h6 id="rotate-定义旋转"><a href="#rotate-定义旋转" class="headerlink" title="rotate() 定义旋转"></a>rotate() 定义旋转</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">rotate(&lt;angle&gt;)<br></code></pre></div></td></tr></table></figure>

<h6 id="scale-定义缩放"><a href="#scale-定义缩放" class="headerlink" title="scale() 定义缩放"></a>scale() 定义缩放</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">scale(&lt;number&gt; <span class="hljs-selector-attr">[, &lt;number&gt;]</span>)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>两个参数表示定义宽和高缩放比例，第二个参数省略表示两值相同</li>
<li>number 参数值可以是正数、负数和小数<ul>
<li>正数值基于指定的宽度和高度将放大元素</li>
<li>负数表示翻转元素（如文字反转），然后再缩放元素</li>
<li>使用小于一的正数可以缩小元素</li>
</ul>
</li>
<li>可以使用 <strong>scaleX()</strong> 和 <strong>scaleY()</strong> 分别设置</li>
</ul>
<h6 id="translate-定义移动"><a href="#translate-定义移动" class="headerlink" title="translate() 定义移动"></a>translate() 定义移动</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">translate(&lt;translation-value&gt; <span class="hljs-selector-attr">[, &lt;translation-value&gt;]</span>)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>分别表示 x轴 和 y轴 相对于原位置的偏移距离</li>
<li>省略第二个参数则第二个参数默认为 0</li>
<li>为负值为反向偏移</li>
<li>可以使用 <strong>translateX()</strong> 和 <strong>translateY()</strong> 分别设置</li>
</ul>
<h6 id="skew-定义倾斜"><a href="#skew-定义倾斜" class="headerlink" title="skew() 定义倾斜"></a>skew() 定义倾斜</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">skew(&lt;angle&gt; <span class="hljs-selector-attr">[, &lt;angle&gt;]</span>)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>以 x轴和 或 y轴 为轴旋转，与 rotate() 不同，这个会改变形状</li>
<li>可以使用 <strong>skewX()</strong> 和 <strong>skewY()</strong> 分别设置</li>
</ul>
<h6 id="matrix-定义矩阵"><a href="#matrix-定义矩阵" class="headerlink" title="matrix() 定义矩阵"></a>matrix() 定义矩阵</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">matrix(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)<br></code></pre></div></td></tr></table></figure>

<p>1 到 6 参数分别代表：x轴缩放、x轴倾斜、y轴倾斜、y轴缩放、x轴移动、y轴移动</p>
<h5 id="3D-变换"><a href="#3D-变换" class="headerlink" title="3D 变换"></a>3D 变换</h5><h6 id="translate3d-定义位移"><a href="#translate3d-定义位移" class="headerlink" title="translate3d() 定义位移"></a>translate3d() 定义位移</h6><p>增加了可以让元素在 3D 空间延 Z轴 进行位移</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">translate3d(tx, ty, tz)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>tz：不能是一个百分比值，负责会被视为无效值</li>
<li>可以使用 <strong>translateZ()</strong> 单独设置 Z轴</li>
</ul>
<h6 id="scale3d-定义缩放"><a href="#scale3d-定义缩放" class="headerlink" title="scale3d() 定义缩放"></a>scale3d() 定义缩放</h6><p>增加了可以让元素在 3D 空间在 Z轴 方向上按比例缩放</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">scale3d(sx, sy, sz)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>可以使用 <strong>scaleZ()</strong> 单独设置 Z轴</li>
<li>scaleZ(-1) 定义了一个原点在 Z轴 的对称点（按照元素的交换原点）</li>
</ul>
<h6 id="rotate3d-定义旋转"><a href="#rotate3d-定义旋转" class="headerlink" title="rotate3d() 定义旋转"></a>rotate3d() 定义旋转</h6><p>增加了可以让元素在 3D 空间在 Z轴 方向上按比例缩放</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css">rotate3d(x, y, z, <span class="hljs-selector-tag">a</span>)<br></code></pre></div></td></tr></table></figure>

<ul>
<li>x, y, z 均为 0~1 之间的数值，分别描述元素围绕 x, y, z 轴旋转的矢量值</li>
<li>可以使用 <strong>rotateX(a)</strong> <strong>rotateY(a)</strong> 和 <strong>rotateZ(a)</strong> 分别设置</li>
<li>a：是一个角度值，主要用来指定元素在 3D空间旋转的角度，为正顺时针转，为负逆时针转</li>
</ul>
<h5 id="transfrom-origin-改变变换中心"><a href="#transfrom-origin-改变变换中心" class="headerlink" title="transfrom-origin 改变变换中心"></a>transfrom-origin 改变变换中心</h5><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">transform-origin</span>: [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] [ &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ]? ]<br></code></pre></div></td></tr></table></figure>

<ul>
<li>CSS 变换的原点默认为对象的中心点</li>
<li>接收两个参数，可以是产具体值，也可以是关键词</li>
</ul>
<h5 id="transition-设置过渡动画"><a href="#transition-设置过渡动画" class="headerlink" title="transition 设置过渡动画"></a>transition 设置过渡动画</h5><h6 id="transition-property-设置过渡属性"><a href="#transition-property-设置过渡属性" class="headerlink" title="transition-property 设置过渡属性"></a>transition-property 设置过渡属性</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">transition-property</span>: none | all | [ &lt;IDENT&gt; ] [ <span class="hljs-string">&#x27;,&#x27;</span> &lt;IDENT&gt; ]*<br></code></pre></div></td></tr></table></figure>

<ul>
<li>none：表示没有元素</li>
<li>all：默认值，表示针对所有元素，包括 :before 和 :after 伪元素</li>
<li>IDENT：指定 CSS 属性列表，几乎所有色彩、大小或位置等相关的 CSS 属性，都可以应用过渡</li>
</ul>
<h6 id="transition-duration-设置过渡时间"><a href="#transition-duration-设置过渡时间" class="headerlink" title="transition-duration 设置过渡时间"></a>transition-duration 设置过渡时间</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">transition-duration</span>: &lt;time&gt; [, &lt;time&gt;]*<br></code></pre></div></td></tr></table></figure>

<p>初始值为 0，适用于所有元素，包括 :before 和 :after 伪元素</p>
<h6 id="transition-delay-设置延迟时间"><a href="#transition-delay-设置延迟时间" class="headerlink" title="transition-delay 设置延迟时间"></a>transition-delay 设置延迟时间</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">transition-delay</span>: &lt;time&gt; [, &lt;time&gt;]*<br></code></pre></div></td></tr></table></figure>

<ul>
<li>初始值为 0，适用于所有元素，包括 :before 和 :after 伪元素</li>
<li>设置时间可以为正整数、负整数和 0</li>
<li>为 0 时 必须设置单位是 s 或者 ms</li>
<li>为负数时，过渡的动作会从该时间点开始显示，之前的动作被截断</li>
<li>为正数时，过渡的动作会延迟触发</li>
</ul>
<h6 id="transition-timing-function-设置过渡动画类型"><a href="#transition-timing-function-设置过渡动画类型" class="headerlink" title="transition-timing-function 设置过渡动画类型"></a>transition-timing-function 设置过渡动画类型</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">transition-timing-function</span>: ease | linear | ease-in | ease-out | ease-in-out | <span class="hljs-built_in">cubic-bezier</span>(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;) [, ease | linear | ease-in | ease-out | ease-in-out | <span class="hljs-built_in">cubic-bezier</span>(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;) ]*<br></code></pre></div></td></tr></table></figure>

<ul>
<li>ease：平滑过渡，等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0) 函数</li>
<li>linear：线性过渡，等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0) 函数</li>
<li>ease-in：由慢到快，等同于 cubic-bezier(0.42, 0, 1.0, 1.0) 函数</li>
<li>ease-out：由快到慢，等同于 cubic-bezier(0, 0, 0.58, 1.0) 函数</li>
<li>ease-in-out：由慢到快再到慢，等同于 cubic-bezier(0.42, 0, 0.58, 1.0) 函数</li>
<li>cubic-bezier：特殊的立方贝塞尔曲线效果</li>
</ul>
<h6 id="设置触发效果"><a href="#设置触发效果" class="headerlink" title="设置触发效果"></a>设置触发效果</h6><p>一般通过鼠标事件或状态定义动画，如 CSS伪类 和 JavaScript 事件</p>
<ul>
<li>:link、:visited、:hover、:active、:focus、:checked</li>
<li>click、focus、mousemove、mouseover、mouseout 等</li>
</ul>
<h5 id="animation-设置帧动画"><a href="#animation-设置帧动画" class="headerlink" title="animation 设置帧动画"></a>animation 设置帧动画</h5><p>功能和 transition 相同，区别在于：</p>
<ul>
<li>transition 只能指定属性的开始值和结束值，及其之间的过渡效果</li>
<li>animation 可以定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果</li>
</ul>
<p>兼容性：</p>
<ul>
<li>-webkit-animation、-moz-animation、-o-animation</li>
<li>IE6~9 不支持 animation 属性</li>
</ul>
<h6 id="keyframes-设置关键帧"><a href="#keyframes-设置关键帧" class="headerlink" title="@keyframes 设置关键帧"></a>@keyframes 设置关键帧</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-keyword">@keyframes</span> animationname &#123;<br>    keyframes-selector &#123;<br>        css-styles;<br>    &#125;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<ul>
<li>animationname：定义动画名称</li>
<li>keyframes-selector：定义帧的事件未知，也就是动画时长的百分比<ul>
<li>可取值：0%~100%、from（等价于 0%）、to（等价于 100%）</li>
</ul>
</li>
<li>css-styles：表示一个或多个合法的 CSS 样式属性</li>
<li>为了避免有兼容性的问题，应始终定义 0% 和 100% 位置帧</li>
</ul>
<h6 id="animation-name-定义动画名称"><a href="#animation-name-定义动画名称" class="headerlink" title="animation-name 定义动画名称"></a>animation-name 定义动画名称</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">animation-name</span>: none | IDENT [, none | IDENT]*<br></code></pre></div></td></tr></table></figure>

<p>初始值为 none，定义一个适用的动画列表</p>
<h6 id="animation-duration-定义动画时间"><a href="#animation-duration-定义动画时间" class="headerlink" title="animation-duration 定义动画时间"></a>animation-duration 定义动画时间</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">animation-duration</span>: &lt;time&gt; [, &lt;time&gt;]*<br></code></pre></div></td></tr></table></figure>

<ul>
<li>定义播放时间</li>
<li>默认属性值为 0</li>
<li>为负值时，被视为 0</li>
</ul>
<h6 id="animation-timing-function-设置过渡动画类型"><a href="#animation-timing-function-设置过渡动画类型" class="headerlink" title="animation-timing-function 设置过渡动画类型"></a>animation-timing-function 设置过渡动画类型</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">animation-timing-function</span>: ease | linear | ease-in | ease-out | ease-in-out | <span class="hljs-built_in">cubic-bezier</span>(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;) [, ease | linear | ease-in | ease-out | ease-in-out | <span class="hljs-built_in">cubic-bezier</span>(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;) ]*<br></code></pre></div></td></tr></table></figure>

<p>初始值为 ease，参数值和 transition-timing-function 相同</p>
<h6 id="animation-delay-定义延迟时间"><a href="#animation-delay-定义延迟时间" class="headerlink" title="animation-delay 定义延迟时间"></a>animation-delay 定义延迟时间</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">animation-delay</span>: &lt;time&gt; [, &lt;time&gt;]*<br></code></pre></div></td></tr></table></figure>

<p>允许一个动画开始执行一段时间后才被应用</p>
<h6 id="animation-iteration-count-定义播放次数"><a href="#animation-iteration-count-定义播放次数" class="headerlink" title="animation-iteration-count 定义播放次数"></a>animation-iteration-count 定义播放次数</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">animation-iteration-count</span>: infinite | &lt;number&gt; [, infinite | &lt;number&gt;]*<br></code></pre></div></td></tr></table></figure>

<ul>
<li>默认值为 1，动画只播放一次</li>
<li>infinite 表示无限次，即 CSS 动画永远重复</li>
<li>取值为非整数，将导致动画结束一个周期的一部分</li>
<li>值为负数，则在交替周期内反向播放动画</li>
</ul>
<h6 id="animation-direction-定义播放方向"><a href="#animation-direction-定义播放方向" class="headerlink" title="animation-direction 定义播放方向"></a>animation-direction 定义播放方向</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">animation-direction</span>: normal | alternate [, normal | alternate]*<br></code></pre></div></td></tr></table></figure>

<ul>
<li>normal：默认值，每次循环都是向前播放</li>
<li>alternate：表示第偶数次向前播放，第奇数次项反方向播放</li>
</ul>
<h6 id="animation-play-state-定义播放状态"><a href="#animation-play-state-定义播放状态" class="headerlink" title="animation-play-state 定义播放状态"></a>animation-play-state 定义播放状态</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">animation-play-state</span>: paused | running<br></code></pre></div></td></tr></table></figure>

<ul>
<li><p>running：初始值，定义动画正在播放</p>
</li>
<li><p>paused：定义动画已暂停</p>
</li>
<li><p>可以在 JavaScript 中使用该属性</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">object.style.animationPlayState=<span class="hljs-string">&quot;paused&quot;</span><br></code></pre></div></td></tr></table></figure></li>
</ul>
<h6 id="animation-fill-mode-定义播放外状态"><a href="#animation-fill-mode-定义播放外状态" class="headerlink" title="animation-fill-mode 定义播放外状态"></a>animation-fill-mode 定义播放外状态</h6><figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">animation-fill-mode</span>: none | forwards | backwards | both [, none | forwards | backwards | both ]*<br></code></pre></div></td></tr></table></figure>

<ul>
<li>none：初始值，不设置对象动画外的转态</li>
<li>forwards：设置对象状态为动画结束时的状态</li>
<li>backwards：设置对象状态为动画开始时的状态</li>
<li>both：设置对象状态为动画结束或开始的状态</li>
</ul>
<h4 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h4><h5 id="list-style-image-列表符号"><a href="#list-style-image-列表符号" class="headerlink" title="list-style-image 列表符号"></a>list-style-image 列表符号</h5><p>自定义项目符号，允许指定一个外部图标文件</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-attribute">list-style-image</span>: none | <span class="hljs-built_in">url</span>()<br></code></pre></div></td></tr></table></figure>

<ul>
<li>自定义项目符号存在时，会覆盖 list-style-type 设置的符号</li>
<li>比较简陋，可以利用背景图精确定位，然后左侧留白巧妙达到效果，需要取消默认样式</li>
</ul>
<h5 id="list-style-position-符号位置"><a href="#list-style-position-符号位置" class="headerlink" title="list-style-position 符号位置"></a>list-style-position 符号位置</h5><h5 id="list-style-type-符号类型"><a href="#list-style-type-符号类型" class="headerlink" title="list-style-type 符号类型"></a>list-style-type 符号类型</h5><table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>disc</td>
<td>实心圆，默认值</td>
<td>upper-roman</td>
<td>大写罗马数字</td>
</tr>
<tr>
<td>circle</td>
<td>空心圆</td>
<td>lower-alpha</td>
<td>小写英文字母</td>
</tr>
<tr>
<td>square</td>
<td>实心方块</td>
<td>upper-alpha</td>
<td>大写英文字母</td>
</tr>
<tr>
<td>decimal</td>
<td>阿拉伯数字</td>
<td>none *</td>
<td>不使用项目符号</td>
</tr>
<tr>
<td>lower-roman</td>
<td>小写罗马数字</td>
<td>armenian</td>
<td>传统的亚美尼亚数字</td>
</tr>
<tr>
<td>cjk-ideographic</td>
<td>浅白的表意数字</td>
<td>georgian</td>
<td>传统的乔治数字</td>
</tr>
<tr>
<td>lower-greek</td>
<td>基本的希腊小写字母</td>
<td>hebrew</td>
<td>传统的希伯莱数字</td>
</tr>
<tr>
<td>hiragana</td>
<td>日文平假名字符</td>
<td>hiragana-iroha</td>
<td>日文平假名序号</td>
</tr>
<tr>
<td>katakana</td>
<td>日文片假名字符</td>
<td>katakana-iroha</td>
<td>日文片假名序号</td>
</tr>
<tr>
<td>lower-latin</td>
<td>小写拉丁字母</td>
<td>upper-latin</td>
<td>大写拉丁字母</td>
</tr>
</tbody></table>
<h4 id="属性值"><a href="#属性值" class="headerlink" title="属性值"></a>属性值</h4><h5 id="initial-取消样式指定"><a href="#initial-取消样式指定" class="headerlink" title="initial 取消样式指定"></a>initial 取消样式指定</h5><p>让各种属性使用默认值，例：<code>color: initial; /* 恢复到浏览器默认的黑色字体 */</code>  </p>
<h5 id="inherit-默认继承"><a href="#inherit-默认继承" class="headerlink" title="inherit 默认继承"></a>inherit 默认继承</h5><p>默认继承来自父辈的该属性的属性值</p>
<h4 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h4><h5 id="cursor-定义鼠标样式"><a href="#cursor-定义鼠标样式" class="headerlink" title="cursor 定义鼠标样式"></a>cursor 定义鼠标样式</h5><ul>
<li>auto：根据上下文决定应该显示什么光标</li>
<li>crosshair：十字线光标（+）</li>
<li>default：基于平台的默认光标，通常渲染为一个箭头</li>
<li>pointer：指针光标，表示一个超链接<ul>
<li><code>cursor: hand;</code> ：兼容 IE6 以下版本浏览器</li>
</ul>
</li>
<li>move：十字箭头光标，用于标示对象可被移动</li>
<li>e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|resize：表示正在移动某个边或某个角的鼠标箭头样式</li>
<li>text：表示可以选择文本，通常渲染为 I 型光标</li>
<li>wait：表示程序正忙，需要用户等待，通常渲染为手表或沙漏</li>
<li>help：光标下的对象包含有帮助内容，通常渲染为一个问号或一个气球</li>
<li>&lt;url&gt;URL：自定义光标类型的图标路径<ul>
<li>IE 和 Opera 仅支持 *.cur 等待定的图片格式</li>
<li>其他几款既支持特定图片类型，也支持常见的 jpg png gif 等类型</li>
</ul>
</li>
</ul>
<h3 id="特性-1"><a href="#特性-1" class="headerlink" title="特性"></a>特性</h3><h4 id="层叠性"><a href="#层叠性" class="headerlink" title="层叠性"></a>层叠性</h4><h5 id="CSS样式表的优先级"><a href="#CSS样式表的优先级" class="headerlink" title="CSS样式表的优先级"></a>CSS样式表的优先级</h5><p>作者定义的样式 &gt; 用户设置的样式 &gt; 浏览器的默认样式 &gt; HTML的默认样式</p>
<p>特殊：</p>
<p>CSS2中，用户设置的带 !important 的样式要优先于 作者声明的 !important 样式</p>
<h5 id="CSS样式的优先级"><a href="#CSS样式的优先级" class="headerlink" title="CSS样式的优先级"></a>CSS样式的优先级</h5><p>计算权值的方式判断优先级</p>
<ul>
<li>权值为 0 的：通配符选择器</li>
<li>权值为 1 的：标签选择器、伪元素选择器、伪对象选择器</li>
<li>权值为 10 的：类选择器、属性选择器</li>
<li>权值为 100 的：ID选择器</li>
</ul>
<p>对于多个选择器组合而成的复合型选择器，分别计算后相加</p>
<ol>
<li>分值越高优先级越高</li>
<li>若分值相同则根据位置关系来进行判断，越靠近对象的优先级越高</li>
</ol>
<p>另外，<code>!important</code> 表示最大优先级，要放置在声明语句与分号之间</p>
<figure class="highlight css"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span> &#123;    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span><span class="hljs-meta">!important</span>;&#125;<br></code></pre></div></td></tr></table></figure>

<p>被继承的值具有特殊性，权值为 0</p>
<p>即不管父级样式的优先级多大，被子级元素继承时，该原始的优先级权重都为 0</p>
<p>例子：</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">        <span class="hljs-selector-id">#header</span> &#123;			<span class="hljs-attribute">color</span>: blue;        &#125;        <span class="hljs-selector-tag">span</span> &#123;            <span class="hljs-attribute">color</span>: grey;        &#125;    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;header&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;blue&quot;</span>&gt;</span>    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>遗产继承不如白手起家<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-comment">&lt;!-- 为灰色而不是蓝色 --&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<ul>
<li>内联样式优先级更高</li>
<li>在相同特殊性下，遵循就近原则</li>
<li><code>!important</code> 有最大优先权，不论远近<ul>
<li>但继承的 <code>!important</code> 内的样式也还是 0</li>
</ul>
</li>
</ul>
<h4 id="继承性"><a href="#继承性" class="headerlink" title="继承性"></a>继承性</h4><p>指被包含的元素将拥有外层元素的样式效果</p>
<h4 id="显示类型-1"><a href="#显示类型-1" class="headerlink" title="显示类型"></a>显示类型</h4><h5 id="块状元素-Block"><a href="#块状元素-Block" class="headerlink" title="块状元素 Block"></a>块状元素 Block</h5><p>宽度一般为 100%，占据一行</p>
<p>address、blockquote、div、dl、fieldset、form、h1~h6、hr、noframes、noscript、ol、p、pre、table、ul、li、legend</p>
<h5 id="行内元素-Inline"><a href="#行内元素-Inline" class="headerlink" title="行内元素 Inline"></a>行内元素 Inline</h5><p>没有固定的大小，定义它的 width 和 height 属性无效，可以在行内自由流动，可以定义边界、补白、边框和背景</p>
<p>其显示的高度和宽度只能够根据所包含内容的高度和宽度来确定</p>
<p>a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、i、img、input、kbd、label、map、object、q、samp、script、select、small、span、strike、strong、sub、textarea、tt、var</p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/CSS/">CSS</a>
                    
                      <a class="hover-with-bg" href="/tags/CSS3/">CSS3</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均为本人原创，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/08/14/vue%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">vue笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/08/03/HTML%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">HTML笔记</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->

  <div class="col-lg-7 mx-auto nopadding-x-md">
    <div class="container custom post-custom mx-auto">
      <img src="/img/agoni.gif" srcset="/img/loading2.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> <h5 style="text-align: center; margin-top: 1rem;">谢谢您的光临噢！！！</h5> 
    </div>
  </div>


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <span>张宝文</span> <i class="iconfont icon-love"></i> <span>郑佳丽</span>  
	<!--《添加网站运行时间 -->
<br/>

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date(); 

function createtime() {
    //此处修改你的建站时间或者网站上线时间
    var grt = new Date('07/28/2021 19:00:00');
    now.setTime(now.getTime() + 250);
    days = (now - grt) / 1000 / 60 / 60 / 24;

    dnum = Math.floor(days);
    hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if (String(hnum).length == 1) {
        hnum = "0" + hnum;
    }
    minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if (String(mnum).length == 1) {
        mnum = "0" + mnum;
    }
    seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if (String(snum).length == 1) {
        snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = " 本站已各种夹缝中安全运行 " + dnum + " 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
</script>

<!-- 添加网站运行时间》-->
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/js/local-search.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

  <script>
    function typing(id, title){
        var typed = new Typed('#' + id, {
            strings: [
              '  ',
              title + "&nbsp;",
            ],
            cursorChar: "❤",
            typeSpeed: 150,
            loop: false,
        });
        typed.stop();
        $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
        });
    }

    
        typing("subtitle", document.getElementById('subtitle').title)
    

  </script>













  
<script src="//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/yinghua.js"></script>



<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>

</body>
</html>
